<template>
	<view class="indexStyle">
		<view class="hearder">
			<SearchTab v-on:tabClick="tabClick"></SearchTab>
		</view>
		<view>
			<ImageShopContent></ImageShopContent>
		</view>
		<view class="shop-cont">
			<ShopList :shopList="shopList" class="shop-list" v-on:shopClick="shopClick"></ShopList>
		</view>
	</view>
</template>

<script>
	import SearchTab from './common/search-tab.vue'
	import ImageShopContent from './common/image-shop-content.vue'
	import ShopList from './common/shop-list.vue'
	import http from '../../util/httpRequest.js'
	import store from '../../store/index.js'
	export default {
		components:{
			SearchTab,
			ImageShopContent,
			ShopList,		
		},
		data() {
			return {
				shopList:null,
				tabTitle:'首页'
			}
		},
		
		methods: {
			tabClick(tab){
				this.tabTitle = tab
				this.getShopList()
			},
			getShopList(){
				uni.request({
					url: http.productUrl+'uni/getSpuByTab',
					method: 'POST',
					data: {
						tab: this.tabTitle
					},
					 header: {
					    'content-type': 'application/json' // 默认值
					  },
					  success: (res) => {
							
					        this.shopList = res.data.list
					  }
				})
			},
			// 商品点击后
			shopClick(shopItem){
				var that = this
				uni.showLoading({title: '商品加载中'});
				// console.log("数据",shopItem)
				uni.request({
					url:http.productUrl+"uni/getShop",
					method:"POST",
					data:{
						id:shopItem.id
					},
					success(res) {
						console.log(res.data.data)
						uni.hideLoading();
						//放到缓存内
						store.commit("shopData",res.data.data)
						//放图片
						store.commit("shopImg",res.data.data.image)
						//存放返回上一级路由,当前路由
						store.commit("backRouter","/pages/index/index")
						uni.navigateTo({
							url:"../common/shop",
							animationType:"pop-in",
							success() {
								store.commit("router","/pages/index/index")
							}
						})
						
					}
				})
				
			},
			
			
			
			},
			created() {
				this.getShopList();
			},
			onPullDownRefresh() {
				this.getShopList()
			}
		}
		
	
</script>

<style scoped>
.indexStyle{
	margin: 0 15upx;
}
.shop-list{
	margin: 30 auto;
	width: 95%;
	
}
.shop-cont{
	width: 100%;
	border: #C0C0C0;
}


</style>
